<template>
  <div class="pad-20 bgc-default">
    <div class="tab-sticky">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="直播分析" name="0"></el-tab-pane>
        <el-tab-pane label="直播PK榜" name="1"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="v-align-c total-bar" v-if="activeName == 0">
      <div class="flex-item text-align-c total-bar-item">
        <div class="font-28 font-w">{{countEntity.liveRoomNum}}</div>
        <div class="font-16 mar-t-16 color-96">合计直播间</div>
      </div>
      <div class="flex-item text-align-c total-bar-item">
        <div class="font-28 font-w">{{countEntity.customerNum}}</div>
        <div class="font-16 mar-t-16 color-96">合计观众数</div>
      </div>
      <div class="flex-item text-align-c total-bar-item">
        <div class="font-28 font-w">{{countEntity.customerByNum}}</div>
        <div class="font-16 mar-t-16 color-96">合计购买人数</div>
      </div>
      <div class="flex-item text-align-c total-bar-item">
        <div class="font-28 font-w">{{countEntity.orderNum}}</div>
        <div class="font-16 mar-t-16 color-96">合计成交订单</div>
      </div>
      <div class="flex-item text-align-c total-bar-item">
        <div class="font-28 font-w">￥{{countEntity.orderAmount}}</div>
        <div class="font-16 mar-t-16 color-96">合计成交额</div>
      </div>
    </div>
    <div class="bg-color-white pad-20 mar-t-15">
      <!--直播分析-->
      <template v-if="activeName == 0">
        <div class="top-operate-default">
          <div class="search-item">
            <label class="font-14">搜索直播：</label>
            <el-input style="width: 200px;" v-model="searchListQuery.roomName" placeholder="请输入直播计划标题"></el-input>
            <label class="font-14 mar-l-20">订单成交金额大于等于</label>
            <el-input class="pad-l-10" style="width: 200px;" placeholder="请输入金额" v-model="searchListQuery.orderPrice" type="number">
              <template slot="append">元</template>
            </el-input>
            <!-- <el-select class="select-class pad-l-10" v-model="searchListQuery.liveStatus" placeholder="请选择状态">
              <el-option label="全部" value=""/>
              <el-option v-for="(val, key) in dict.liveStatus" :key="key" :label="val" :value="key"/>
            </el-select> -->
            <el-button-group class="mar-l-20">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button plain="" @click="resetSearch">重置</el-button>
            </el-button-group>
          </div>
        </div>
        <!--直播状态 -->
      <div class="tabs-box mar-b-15 mar-t-15">
        <!--<el-tabs type="card" v-model="applyStatus">-->
          <!--<el-tab-pane label="全部(10)" name="0"></el-tab-pane>-->
          <!--<el-tab-pane label="直播中(3)" name="1"></el-tab-pane>-->
          <!--<el-tab-pane label="未开始(2)" name="2"></el-tab-pane>-->
          <!--<el-tab-pane label="已结束(5)" name="3"></el-tab-pane>-->
        <!--</el-tabs>-->
      </div>
        <!-- 内容列表 -->
        <div class="table-container mar-t-20">
          <el-table ref="multipleTable" :data="liveList" v-loading="listLoading" element-loading-text="加载中" style="width: 100%" header-cell-class-name="default-header"
            row-class-name="default-row">
            <el-table-column width="480px" label="直播间信息" fixed="left">
              <template slot-scope="scope">
                <div class="flex v-align-c cursor-p" @click="showDetail(scope.row)">
                  <label><img :src="scope.row.coverImg" class="user-avatar cursor-p"></label>
                  <div class="font-14 pad-l-10 live-info">
                    <div class="color-323232 font-16">{{scope.row.roomName}}</div>
                    <div class="color-96">
                      <span>开播：<span class="color-323232">{{scope.row.startDate}}</span></span><br/>
                      <span>结束：<span class="color-323232">{{scope.row.endDate}}</span></span><br/>
                      <span>主播：<span class="color-323232">{{scope.row.anchorName}}</span></span>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="260px" label="状态" prop="liveStatus">
              <template slot-scope="scope">
                {{ dict.liveStatus[scope.row.liveStatus] }}
              </template>
            </el-table-column>
            <el-table-column width="260px" label="成交订单数" prop="orderNum"></el-table-column>
            <el-table-column width="260px" label="成交总金额" prop="orderPrice">
              <template slot-scope="scope">
                <div>￥{{ scope.row.orderPrice }}</div>
              </template>
            </el-table-column>
            <el-table-column width="260px" label="购买人数" prop="orderMemberNum">
            </el-table-column>
            <el-table-column min-width="140px" label="操作" align="right" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" size="medium" @click="showDetail(scope.row)">查看明细</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 列表分页 -->
        <div class="pagination">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                         :current-page="searchListQuery.currentPage"
                         :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
                         layout="total, sizes, prev, pager, next, jumper"
                         :total="total">
          </el-pagination>
        </div>
      </template>
      <!--直播PK榜-->
      <template v-if="activeName == 1">
        <live-pk></live-pk>
      </template>
    </div>
  </div>
</template>

<style lang="less" scoped>
.total-bar{
  // box-shadow: 0 0 23px rgba(154, 154, 154, 0.15);
  height: 158px;
  background-color: white;
  margin: 15px 0 12px;
  .total-bar-item{
    border-right: 1px solid rgba(134, 134, 134, 0.35);
    &:last-child{
      border-right: unset;
    }
  }
}
.live-info{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: 120px;
}
.color-323232{
  color: #323233;
}
.color-96{
  color: #969799;
}
.time-line{
  width: 20%;
  float: left;
  .time-box{
    position: fixed;
    width: 19%;
    right: 0;
    top: 95px;
  }
}
.detila-div-80{
  float: left;
  width: 80%;
}

.user-avatar {
  width: 150px;
  height: 120px;
  display: block;
  padding: 1px;
  border: #efefef 1px solid;
}

.div-styls{
  margin-top: 30px;
  margin-bottom: 20px;
}
.el-tabs__item{
  font-size: 20px;
}
.tab-sticky{
  position: sticky;
  top: 0px;
  left: 20px;
  width: calc(100% + 40px);
  background: white;
  z-index: 1000;
  padding-top: 10px;
  padding-left: 17px;
  margin-left: -20px;
  margin-top: -20px;
  /deep/ .el-tabs__header{
    margin: 0;
  }
}
.line-h-14{
  line-height: 1.4;
}
</style>

<script>
  import { pageLiveRoom, countLiveRoomLog } from '@/api/user/liveRoom'
  import livePk from './components/live-pk'
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui

  export default {
    components: { livePk },
    directives: {
      // 拖动窗口
      elDragDialog
    },
    filters: {
      dateFilter(e, e1, e2) {
        if (e != null) {
          return parseInt((new Date(e2).getTime() - new Date(e1).getTime()) / (60 * 1000))
        }
        return e
      },
      dateFilterNum(e, e1, e2, e3) {
        if (e != null && e3 !== '0.00') {
          return (e3 / parseInt((new Date(e2).getTime() - new Date(e1).getTime()) / (60 * 1000))).toFixed(2)
        }
        return e
      }
    },
    data() {
      return {
        live: {},
        dict: {},
        searchListQuery: {
          currentPage: 1,
          size: 10,
          orderPrice: '',
          roomName: '',
          liveStatus: ''
        },
        countEntity: {},
        activeName: '0',
        total: 0,
        liveList: [],
        listLoading: false,
        applyStatus: 0
      }
    },
    // 初始化页面
    created() {
      this.initCount()
      this.handleSearch()
    },
    mounted() {
    },
    methods: {
      initCount() {
        countLiveRoomLog(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.countEntity = response.data
        })
      },
      handleClick() {
        this.handleSearch()
      },
      // 更改当前页数
      handleCurrentChange(val) {
        console.log(val)
        this.searchListQuery.currentPage = val
        this.searchEls()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.searchEls()
      },
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.searchEls()
      },
      searchEls() {
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        pageLiveRoom(this.searchListQuery).then(response => {
          if (response.isError) return
          this.liveList = response.data.records
          this.total = response.data.total
          this.dict = response.data.dict
        })
      },
      resetSearch() {
        this.searchListQuery = {
          currentPage: 1,
          size: 10,
          orderPrice: '',
          roomName: '',
          liveStatus: ''
        }
        this.handleSearch()
      },
      showDetail(row) {
        row.liveStatusName = this.dict.liveStatus[row.liveStatus]
        this.$router.push({ path: '/live/shop-live/detail/index', query: row })
      }
    }
  }
</script>
